<template>
    <div ref="chartRef1" class="chart-container"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import titleIcon from '@/assets/images/titleIcon.png';
defineOptions({ name: 'StackedAreaChart' })

const props: any = defineProps({
    data: {
        type: Object,
    },
    yAxisLabel: {
        type: String,
        default: ''
    },
    index: {
        type: Number,
        default: 3
    },
    title: {
        type: String,
        default: '',
    },
})

// 动态生成渐变色
function getGradientColor(index: number): echarts.graphic.LinearGradient {
  let startColor: string;
  let endColor: string;

  switch (index) {
    case 1:
      startColor = '#55B68B';
      endColor = '#4EA775';
      break;
    case 0:
      startColor = '#3560F6';
      endColor = '#69D0FF';
      break;
    case 2:
      startColor = '#FA880E';
      endColor = '#F4BA43';
      break;
  }

  return new echarts.graphic.LinearGradient(
    0, 0, 0, 1, // 渐变方向，从上到下
    [
      { offset: 0, color: startColor }, // 起始颜色
      { offset: 1, color: endColor }  // 结束颜色
    ]
  );
}

function getColor(index: number): echarts.graphic.LinearGradient {
  let startColor: string;
  let endColor: string;
  switch (index) {
    case 1:
      startColor = '#55B080';
      endColor = 'rgba(48, 201, 201, 0)';
      break;
    case 0:
      startColor = 'rgba(95,164,237, 0.5)';
      endColor = 'rgba(123,170,224, 1)';
      break;
    case 2:
      startColor = 'rgba(237, 168, 95, 0.5)';
      endColor = 'rgba(224, 187, 123, 0)';
      break;
  }
  let item = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      { offset: 0, color: startColor },
      { offset: 1, color: endColor },
    ],
    global: false
  }
  return item
}

const chartRef1 = ref(null);
let chartInstance: any = null;

const initChart = () => {
    chartInstance = echarts.init(chartRef1.value);
    let data = [
        {
            type: 'line',
            smooth: true,
            symbol: 'none', // 不显示数据点
            emphasis: {
                focus: 'series',
            },
            data: props.data.dieData,
            name: '死亡',
            lineStyle: {
                color: getGradientColor(0)
            },
            areaStyle:{
                color:getColor(0),
                opacity: 1,
            },
            index:0
        },
        {
            type: 'line',
            smooth: true,
            symbol: 'none', // 不显示数据点
            emphasis: {
                focus: 'series',
            },
            data: props.data.disappearData,
            name: '失踪',
            lineStyle: {
                    color: getGradientColor(1)
                },
                areaStyle:{
                color:getColor(1),
                opacity: 1,
            },
            index:1
        },
        {
            type: 'line',
            smooth: true,
            symbol: 'none', // 不显示数据点
            emphasis: {
                focus: 'series',
            },
            data: props.data.injuredData,
            name: '受伤',
            lineStyle: {
                    color: getGradientColor(0)
                },
                areaStyle:{
                color:getColor(0),
                opacity: 1,
            },
            index:0
        },
        {
            type: 'line',
            smooth: true,
            symbol: 'none', // 不显示数据点
            emphasis: {
                focus: 'series',
            },
            data: props.data.economics,
            name: '经济损失',
            lineStyle: {
                    color: getGradientColor(2)
            },
            areaStyle:{
                color:getColor(2),
                opacity: 1,
            },
            index:2
        },
    ].slice(props.index == 1 ? 0 : props.index, props.index + 1)
    const option = {
        title: {
            text:  `{icon|}{text|${props.title}}` ,
            textStyle: {
                rich: {
                    icon: {
                        backgroundColor: {
                            image: titleIcon
                        },
                        width: 16,
                        height: 16,
                        align: 'center',
                        verticalAlign: 'middle',
                    },
                    text: {
                        color: '#333',
                        fontSize: 16,
                        align: 'left',
                        verticalAlign: 'middle',
                        padding:[4, 0, 0, 4]
                    }
                }
            },
            left: 'left',
            top: 'top'
        },
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '2%',
            containLabel: true
        },
        legend: {
            data: data.map((dataset) => ({
              name: dataset.name,
              textStyle: {
                color: '#333333' // 默认黑色文字
              },
              itemStyle: {
                color: getGradientColor(dataset.index), // 图例颜色
              },
              icon: 'roundRect',
              symbolSize: 10,
            })),
            top: '5%',
            left: 'center'
        },
        xAxis: {
            type: 'category',
            data: props.data.data,
            axisTick:{
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                  color: '#D9E1F3', // 设置 x 轴线的颜色
                  width: 1 // 设置 x 轴线的宽度
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                  color: '#999999',
                  fsize: 12
                }
            }
        },
        yAxis: {
            type: 'value',
            name: props.yAxisLabel,
            nameTextStyle:{
              color: '#86909C'
            },
            minInterval: 1,
            splitLine:{
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#D9E1F3',
                }
            },
            axisTick:{
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                  color: '#D9E1F3', // 设置 x 轴线的颜色
                  width: 1 // 设置 x 轴线的宽度
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                  color: '#999999',
                  fsize: 12
                }
            }
        },
        series: data
    };
    chartInstance.setOption(option);
};

onMounted(() => {
    initChart();
    window.addEventListener('resize', () => {
        chartInstance.resize();
    });
});

watch(
    () => props.data,
    () => {
        initChart();
    },
    { deep: true }
);
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 400px;
    /* 根据需求调整高度 */
}
</style>